<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" :inline="true">
      <el-form-item label="求职者" prop="joberName">
        <el-input
          v-model="queryParams.joberName"
          placeholder="请输入求职者"
          clearable
          size="small"
          style="width: 240px"
          @keyup.enter.native="handleQueryFn"
        />
      </el-form-item>
      <!-- <el-form-item label="推荐人" prop="projectName">
        <el-input
          v-model="queryParams.projectName"
          placeholder="请输入推荐人"
          clearable
          size="small"
          style="width: 240px"
          @keyup.enter.native="handleQueryFn"
        />
      </el-form-item> -->
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQueryFn">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQueryFn">重置</el-button>
        <el-button
          type="primary"
          icon="el-icon-plus"
          size="mini"
          @click="handleAddFn"
          v-hasPermi="['pmp:recruit:add']"
        >新增简历</el-button>
      </el-form-item>
    </el-form>

    <!-- <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="danger"
          icon="el-icon-delete"
          size="mini"
          :disabled="multiple"
          @click="handleDeleteFn"
          v-hasPermi="['pmp:recruit:remove']"
        >删除</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="warning"
          icon="el-icon-download"
          size="mini"
          @click="handleExportFn"
          v-hasPermi="['pmp:recruit:export']"
        >发送周报</el-button>
      </el-col>
    </el-row> -->

    <el-table v-loading="loading" :data="recruitList" @selection-change="handleSelectionChangeFn">
      <el-table-column align="center" label="序号" width="50">
        <template slot-scope="scope">
          {{scope.$index+1}}
        </template>
      </el-table-column>
      <el-table-column label="求职者" prop="joberName" width="100" />
      <el-table-column label="推荐人" prop="recUserName" width="100" />
      <el-table-column label="联系电话" prop="jobberPhone" width="120" />
      <el-table-column label="技术类型" prop="technologyId" :show-overflow-tooltip="true" width="90">
        <template slot-scope="scope">
          <span>{{ selectDictLabel(workTypeData, scope.row.technologyId) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="面试官" prop="viewUserName" :show-overflow-tooltip="true" width="90" />
      <el-table-column label="推荐时间" prop="createTime" :show-overflow-tooltip="true" width="160" >
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.createTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="预约时间" prop="makeTime" width="160">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.makeTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="招聘状态" prop="jobberStatic" :show-overflow-tooltip="true" width="90">
        <template slot-scope="scope">
          <span>{{ scope.row.jobberStatic | fltStatic }}</span>
        </template>
      </el-table-column>
      <!-- <el-table-column label="流程状态" prop="flowStatic" :show-overflow-tooltip="true" width="120">
        <template slot-scope="scope">
          <span>{{ scope.row.flowStatic | fltFlowStatic }}</span>
        </template>
      </el-table-column> -->
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button
            v-if="scope.row.vitaeUrl"
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleDownLondFn(scope.row)"
            v-hasPermi="['pmp:recruit:download']"
          >下载</el-button>

          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleDetailFn(scope.row)"
            v-hasPermi="['pmp:recruit:query']"
          >详情</el-button>

          <template v-if="scope.row.jobberStatic == 1">
            <el-button
              size="mini"
              type="text"
              icon="el-icon-edit"
              @click="handleUpdateFn(scope.row)"
              v-hasPermi="['pmp:recruit:edit']"
            >修改</el-button>

            <el-button
              size="mini"
              type="text"
              icon="el-icon-delete"
              @click="handleDeleteFn(scope.row)"
              v-hasPermi="['pmp:recruit:remove']"
            >删除</el-button>

            <el-button
              size="mini"
              type="text"
              icon="el-icon-edit"
              @click="handleDistributionFn(scope.row)"
              v-hasPermi="['pmp:recruit:hrEdit']"
            >分配</el-button>

          </template>
          <!-- 面试流转 -->
          <el-button
            v-show="scope.row.flowStatic == 1 && scope.row.jobberStatic == 2"
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleScreenFn(scope.row)"
            v-hasPermi="['pmp:recruit:interviewerEdit']"
          >筛选</el-button>

          <el-button
            v-show="scope.row.flowStatic == 3 && scope.row.jobberStatic == 2"
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleSubscribeFn(scope.row)"
            v-hasPermi="['pmp:recruit:hrEdit']"
          >预约</el-button>

          <el-button
            v-show="scope.row.flowStatic == 4 && scope.row.jobberStatic == 2"
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleFeedbackFn(scope.row)"
            v-hasPermi="['pmp:recruit:interviewerEdit']"
          >面试反馈</el-button>

          <el-button
            v-show="scope.row.flowStatic == 6 && scope.row.jobberStatic == 2"
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleDecisionFn(scope.row)"
            v-hasPermi="['pmp:recruit:hrEdit']"
          >入职决定</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getListFn"
    />
    <!-- 流程页面 -->
    <circulation-detail ref='circulationDetail' :id.sync="circulation.id" ></circulation-detail>

    <!-- 详情页面 -->
    <recruit-detail ref='recruitDetail' :title.sync="detailData.title" :id.sync="detailData.id" ></recruit-detail>

    <!-- 新增、修改面试信息页面 -->
    <recruit-edit ref='recruitEdit' :title.sync="detailData.title" :id.sync="detailData.id" :propRecruitFormData.sync="detailData.formData" ></recruit-edit>

  </div>
</template>

<script>
  import { apiRequestList, apiRequestFlowto, apiRequestViewerset, apiRequestDelete, apiRequestDetail } from "@/api/pmp/api.recruit";

  import circulationDetail from './components/circulation.detail.vue';
  import recruitDetail from './components/recruit.detail.vue';
  import recruitEdit from './components/recruit.edit.vue';

  export default {
    name: "recruit",
    components: {
      circulationDetail,
      recruitDetail,
      recruitEdit
    },
    data() {
      return {
        // 遮罩层
        loading: true,
        // 选中数组
        ids: [],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 总条数
        total: 0,
        // 角色表格数据
        recruitList: [],
        // 流程专用页面
        circulation: {
          title: "预约",
          id: undefined
        },
        // 预约页面数据
        orderData: {},
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          roleName: undefined,
          roleKey: undefined,
          status: undefined
        },
        // 工作类型数据字典
        workTypeData: [],
        detailData: {
          title: "面试者详情",
          id: undefined
        },
        defaultProps: {
          children: "children",
          label: "label"
        }
      };
    },
    filters: {
      fltStatic (val) {
        switch (+val){
        case 1:
          return '未开始';
          break;
        case 2:
          return '进行中';
          break;
        case 3:
          return '已结束';
          break;
        default:
          // statements_def
          break;
        }
      },
      fltFlowStatic (val) {
        switch (+val){
        case 1:
          return '待筛选';
          break;
        case 2:
          return '筛选未通过';
          break;
        case 3:
          return '待预约';
          break;
        case 4:
          return '面试中';
          break;
        case 5:
          return '面试未通过';
          break;
        case 6:
          return '入职待定';
          break;
        case 7:
          return '已结束';
          break;
        default:
          return '未开始';
          // statements_def
          break;
        }
      },
    },
    computed: {
      flowId () {
        return this.$store.getters.flowId;
      }
    },
    watch:{
      flowId:{
        handler: function (val) {
          this.getListFn();
        },
        immediate: true
      }
    },
    created() {
      this.getListFn();
      this.apiGetDicts("technology_post_type").then(response => {
        this.workTypeData = response.data;
      });
    },
    methods: {
      /** 查询角色列表 */
      getListFn() {
        let query = {...this.queryParams};
        this.loading = true;
        if (this.flowId) query.flowId = this.flowId;
        apiRequestList(query).then(
          response => {
            this.recruitList = response.rows;
            this.total = response.total;
            this.loading = false;
          }
        );
      },
      /** 搜索按钮操作 */
      handleQueryFn() {
        this.queryParams.pageNum = 1;
        this.getListFn();
      },
      /** 重置按钮操作 */
      resetQueryFn() {
        this.dateRange = [];
        this.resetForm("queryForm");
        this.$store.dispatch('clearFlowId');
        this.handleQueryFn();
      },
      // 多选框选中数据
      handleSelectionChangeFn(selection) {
        this.ids = selection.map(item => item.id);
        this.single = selection.length!=1;
        this.multiple = !selection.length;
      },
      /** 新增简历 */
      handleAddFn() {
        this.open = true;
        this.detailData = {
          title: "添加面试者信息"
        };
        this.$refs.recruitEdit.openDetail();
      },
      /** 修改 */
      handleUpdateFn(row) {
        apiRequestDetail(row.id).then(response => {
          let list = {...response.data};
          list.technologyId = list.technologyId + '';
          this.detailData = {
            title: "修改面试者信息",
            id:row.id + "",
            formData:list
          };
          this.$refs.recruitEdit.openDetail();
        });
      },
      /** 下载 */
      handleDownLondFn(row) {
        var link = document.createElement('a');
        //设置下载的文件名
        link.download = row.joberName;
        link.style.display = 'none';
        //设置下载路径
        link.href = row.vitaeUrl;
        //触发点击
        document.body.appendChild(link);
        link.click();
        //移除节点
        document.body.removeChild(link);
      },
      /** 详情 */
      handleDetailFn(row) {
        this.detailData = {
          title: "面试者详情",
          id:row.id + ""
        };
        this.$refs.recruitDetail.openDetail();
      },
      /** 删除按钮操作 */
      handleDeleteFn(row) {
        const ids = row.id || (this.ids || []).join(',');
        this.$confirm('确认删除当前选中的简历吗?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(() => {
          return apiRequestDelete(ids);
        }).then(() => {
          this.getListFn();
          this.msgSuccess("删除成功");
        }).catch((res) => {

        });
      },
      /** 流转 */
      /** 分配 */
      handleDistributionFn(row) {
        this.$confirm('分配后将无法在进行删除和修改，是否确认进行分配？', '分配', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          apiRequestViewerset({
            joberName:row.joberName,
            recuritId:row.id,
            technologyId:row.technologyId
          }).then((res)=>{
            this.getListFn();
            this.$message({
              type: 'success',
              message: res.msg
            });

          });
        }).catch(() => {
          // 放弃操作
        });
      },
      /** 筛选 */
      handleScreenFn(row) {
        this.$prompt('请输入筛选建议，并确认是否通过筛选', '筛选', {
          confirmButtonText: '筛选通过',
          cancelButtonText: '未通过',
          distinguishCancelAndClose: true,
          inputPlaceholder: '输入筛选建议',
          inputType: 'textarea',
          beforeClose: (action, instance,done) => {
            switch (action){
            case 'confirm':
              if(instance.$refs.input.value){
                this.flowtoFn({
                  flowId:row.flowId,
                  flowStatic:3,
                  chooseRemark:instance.$refs.input.value
                });
                done();
              }else{
                this.msgError('请输入筛选建议');
                return;
              }
              break;
            case 'cancel':
              if(instance.$refs.input.value){
                this.flowtoFn({
                  flowId:row.flowId,
                  flowStatic:2,
                  chooseRemark:instance.$refs.input.value
                });
                done();
              }else{
                this.msgError('请输入筛选建议');
                return;
              }
              break;
            default:
              done();
              break;
            }
          }
        });
        // this.$refs.circulationDetail.openDetail();
      },

      /** 预约 */
      handleSubscribeFn(row) {
        this.circulation = {
          id:row.flowId
        };
        this.$refs.circulationDetail.openDetail();
      },

      /** 面试反馈 */
      handleFeedbackFn(row) {
        this.$prompt('根据面试结果，请填写面试建议，并确认是否通过', '面试结果', {
          confirmButtonText: '面试通过',
          cancelButtonText: '未通过',
          distinguishCancelAndClose: true,
          inputPlaceholder: '输入面试建议',
          inputType: 'textarea',
          beforeClose: (action, instance, done) => {
            // console.log("背刺",action, instance, instance.$refs.input.value)
            switch (action){
            case 'confirm':
              if(instance.$refs.input.value){
                this.flowtoFn({
                  flowId:row.flowId,
                  flowStatic:6,
                  jobRemark:instance.$refs.input.value
                });
                done();
              }else{
                this.msgError('请输入面试结果');
                return;
              }
              break;
            case 'cancel':
              if(instance.$refs.input.value){
                this.flowtoFn({
                  flowId:row.flowId,
                  flowStatic:5,
                  jobRemark:instance.$refs.input.value
                });
                done();
              }else{
                this.msgError('请输入面试结果');
                return;
              }
              break;
            default:
              // statements_def
              done();
              break;
            }
          }
        });
      },
      /** 入职决定 */
      handleDecisionFn(row) {
        this.$confirm('确认员工最终是否入职（此操作不可驳回，请确认入职后在选择）？', '入职确认', {
          distinguishCancelAndClose: true,
          confirmButtonText: '入职确认',
          cancelButtonText: '待入职'
        })
          .then(() => {
            // 员工已入职
            this.flowtoFn({
              flowId:row.flowId,
              flowStatic:7,
              isEntry:1
            });
          })
          .catch(action => {
            if(action === 'cancel') {
              // 员工放弃入职
              this.flowtoFn({
                flowId:row.flowId,
                flowStatic:7,
                isEntry:0
              });
            }else{
            // 放弃操作
            }
          });
      },
      /** 页面内流转方法调用 */
      flowtoFn(flowVo){
        apiRequestFlowto(flowVo).then(response => {
          this.$store.dispatch('clearFlowId');
          this.getListFn();
          this.$message({
            type: 'success',
            message: '操作成功!'
          });
        });
      }
    }
  };
</script>
